<template>
  <div class="shouye">
      <a-row :gutter="20" class=" margin-bottom-20">
        <a-col :span="6">
          <a-card class=" height-320">
            <div class="mi-div">
            <div class="left-icon-div">
              <div>
                <img src="../../../assets/icons/u359.svg" alt="">
              </div>
              <div>
                <img src="../../../assets/icons/u359.svg" alt="">
              </div>
              <div>
                <img src="../../../assets/icons/u359.svg" alt="">
              </div>
            </div>
            <div class="right-icon-div">
              <div class="title-div">
                幼儿园名称
              </div>
              <p class="margin-bottom-10">班级总数</p>
              <p class="class-num">9</p>
            </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          
          <a-card class=" height-320">
            <div class="mi-div">
            <div class="left-icon-div">
              <div>
                <img src="../../../assets/icons/u355.svg" alt="">
              </div>
            </div>
            <div class="right-icon-div">
              <div class="title-div"> 幼儿总数 </div>
              <p class="class-num">9</p>
              <div class="title-div"> 今日入园数 </div>
              <p class="class-num">9</p>
            </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class=" height-320">
            <div class="mi-div">
            <div class="left-icon-div">
              <div>
                <img src="../../../assets/icons/u189.svg" alt="">
              </div>
            </div>
            <div class="right-icon-div">
              <div class="title-div"> 教室总数 </div>
              <p class="class-num">9</p>
              <div class="title-div"> 今日入园数 </div>
              <p class="class-num">9</p>
            </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          
          <a-card class=" height-320">
            <div class="mi-div">
            <div class="left-icon-div">
              <div class="img-dddd">
                <img src="../../../assets/icons/u367.svg" alt="">
                <img class="img-iiii" src="../../../assets/icons/u368.svg" alt="">
              </div>
            </div>
            <div class="right-icon-div">
              <div class="title-div"> 课程总数 </div>
              <p class="class-num">9</p>
            </div>
            </div>
          </a-card>
        </a-col>
      </a-row>

      <div class="margin-bottom-20">
        <a-card hoverable title="快捷入口" :headStyle="{backgroundColor: '#F3F3F3'}">
          <div class="kuaijie-div">
            <div v-for="(item, index) in kuaijieData" :key="index">
                <a-icon class="kuaijie-icon" :type="item.icon" />
                <p>{{item.text}}</p>
            </div>
          </div>
        </a-card>
      </div>

      <div class="margin-bottom-20">
        <a-card hoverable class="chuqing-card" title="出勤统计" :headStyle="{backgroundColor: '#F3F3F3'}">
          <div class="chuqin-left">
            <div class="chuqing-left-div">
              <p>本月出勤率</p>
              <p class="chuqinlv">95%</p>
              <!-- <p> 
                <a-icon :style="{color: '#52c41a'}" type="arrow-up" />
                <a-icon :style="{color: '#ff0000'}" type="arrow-down" />
                <span>10%</span>
                同比上月
              </p> -->
              <trend flag="up" style="margin-left: 16px;">
                <span slot="term">同比上月</span>
                <span :style="{color: '#ff0000'}">12%</span>
              </trend>
            </div>
          </div>
          <div class="chuqin-right">
            <div id="mountNode"></div>
          </div>
        </a-card>
      </div>
      
      <div class="margin-bottom-20">
        <a-card hoverable class="chuqing-card" title="课程点播统计/次" :headStyle="{backgroundColor: '#F3F3F3'}">
          <div class="chuqin-left">
            <div class="chuqing-left-div">
              <p>本月出勤率</p>
              <p class="chuqinlv">95%</p>
              <!-- <p> 
                <a-icon :style="{color: '#52c41a'}" type="arrow-up" />
                <a-icon :style="{color: '#ff0000'}" type="arrow-down" />
                <span>10%</span>
                同比上月
              </p> -->
              <trend flag="up" style="margin-left: 16px;">
                <span slot="term">同比上月</span>
                <span :style="{color: '#ff0000'}">12%</span>
              </trend>
            </div>
          </div>
          <div class="chuqin-right">
            <div id="kechengdiv"></div>
          </div>
        </a-card>
      </div>
  </div>
</template>

<script>
import moment from 'moment'
import { Trend, } from '@/components'
const DataSet = require('@antv/data-set')
   export default {
     components: {Trend},
    data () {
      return {
        kuaijieData: [
          {icon: 'snippets',text: '幼儿档案'},
          {icon: 'file-text',text: '家长档案'},
          {icon: 'setting',text: '账号管理'},
          {icon: 'customer-service',text: '在线课程'},
          {icon: 'pic-center',text: '班级动态'},
          {icon: 'credit-card',text: '制卡管理'},
          {icon: 'copyright',text: '园所信息'},
          {icon: 'dashboard',text: '班级管理'},
          {icon: 'message',text: '短信消息'},
        ],
        chuqinData: [],
      }
    },
    mounted(){
        this.setchuqinglv();
        this.setkecheng();

    },
    methods: {
      setchuqinglv(){
          var data = [];
          for(let i=0; i < 10; i++){
            let lv = 80;
            lv = Math.random()*100
            if(lv<80){
                lv=lv+80
            }
            data.push({
              'chuqinlv': parseInt(lv) ,
              'times': '07-0'+(i+1),
            })
          }
          console.log(data)
          var dv = new DataSet.View().source(data);
          dv.transform({
            type: 'fold',
            fields: ['chuqinlv'],
            key: 'type',
            value: 'value'
          });
          var chart = new G2.Chart({
            container: 'mountNode',
            forceFit: true,
            height: 420
          });
          chart.source(dv, {
            value: {
              alias: 'The Share Price in Dollars',
              formatter: function formatter(val) {
                return val;
              }
            },
            times: {
              range: [0, 1]
            }
          });
          chart.tooltip({
            crosshairs: true
          });
          chart.area().position('times*value').color('type').shape('smooth');
          chart.line().position('times*value').color('type').size(2).shape('smooth');
          chart.render();
      },
      setkecheng(){
        
        
          var data = [];
          for(let i=0; i < 10; i++){
            let lv = 80;
            lv = Math.random()*100
            if(lv<80){
                lv=lv+80
            }
            data.push({
              'chuqinlv': parseInt(lv) ,
              'times': '07-0'+(i+1),
            })
          }
          console.log(data)
          var dv = new DataSet.View().source(data);
          dv.transform({
            type: 'fold',
            fields: ['chuqinlv'],
            key: 'type',
            value: 'value'
          });
          var chart = new G2.Chart({
            container: 'kechengdiv',
            forceFit: true,
            height: 420
          });
          chart.source(dv, {
            value: {
              alias: 'The Share Price in Dollars',
              formatter: function formatter(val) {
                return val;
              }
            },
            times: {
              range: [0, 1]
            }
          });
          chart.tooltip({
            crosshairs: true
          });
          chart.area().position('times*value').color('type').shape('smooth');
          chart.line().position('times*value').color('type').size(2).shape('smooth');
          chart.render();
      }
    }
  }
</script>
<style>
  
.shouye .ant-card-body{
  padding: 15px 24px !important;
}
.shouye .chuqing-card .ant-card-body{
  padding: 0px !important;
}
</style>
<style lang="less" scoped>
p{
  margin: 0;
}
  .menu-outlined-icon{
    color: red;
    font-size: 30px;
    font-weight: 600;
  }
  .left-icon-div{
    width: 60px;
    float: left;
    margin-top: 20px;
  }
  .right-icon-div{
    margin-left: 80px;
    font-size: 14px;
    font-family: '微软雅黑', sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #999999;
  }
  .margin-bottom-10{
    margin-bottom: 10px;
  }
  .class-num{
    font-size: 20px;
    color: #666666;
  }
  .width-80{
    width: 80%;
  }
  .img-dddd{
    position: relative;
    .img-iiii{
      position: absolute;
      top: -4px;
      left: 6px;
    }
  }
  .height-320{
    height: 132px;
  }
  .mi-div{
    width: 60%;
    margin: 0 auto;
    overflow: hidden;
  }
  .margin-bottom-20{
    margin-bottom: 20px;
  }
  .kuaijie-div{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .kuaijie-icon{
    font-size: 50px;
    font-weight: 400;
    color: #999999;
    margin-bottom: 10px;
  }
  .chuqin-left{
    width: 200px;
    float: left;

  }
  .chuqin-right{
    margin-left: 200px;
    height: 400px;
    border-left: 1px solid #dddddd;
  }
  .chuqing-left-div{
    margin-top: 50%;
    text-align: center;
    .chuqinlv{
      font-size: 28px;
    }
  }
</style>
